
import {Button} from 'antd'
import React, { useState ,useEffect} from 'react';
import useStore from '@/store/index'
export default function SysSet(){
   const [isSunny,setIsSunny] = useState(false)
   const [isMoon,setIsMoon] = useState(false)
   const ctheme = useStore<any>((state: any) => state.ctheme)
   useEffect(()=>{
    let theme = localStorage.getItem('theme') ? JSON.parse(localStorage.getItem('theme') || '') : 'light'
    document.documentElement.setAttribute('theme', theme)
    localStorage.setItem('theme',JSON.stringify(theme))
    if(theme=='light'){
        setIsSunny(true)
        setIsMoon(false)
    }else{
        setIsSunny(false)
        setIsMoon(true)
    }
   })
   const changeTheme = ()=>{
    console.log(123);
    if(isSunny){
        document.documentElement.setAttribute('theme', 'dark')
        localStorage.setItem('theme', JSON.stringify('dark'))
        setIsSunny(false)
        setIsMoon(true)
        ctheme()
    }else{
        document.documentElement.setAttribute('theme', 'light')
        localStorage.setItem('theme', JSON.stringify('light'))
        setIsSunny(true)
        setIsMoon(false)
        ctheme()
    }
   }
    return (
        <div>
            <Button onClick={changeTheme}>切换主题</Button>
        </div>
    )
}